<template>
    <div class="video_root" @keyup.esc="CloseVideo">
        <div class="video_base">
            <div ref="videoPlayer" class="video_player"></div>
            <div class="video_close">
                <el-button size="small" icon="Close" @click="CloseVideo"></el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
let props = defineProps({
    id: {
        type: String,
        required: true
    },
    Poster: "",
    Src: "",
})
let emits = defineEmits(['closeVideo'])
const videoPlayer = ref(null)

onMounted(() => {
    InitPlayer();
})

watch(
    () => props.Src,
    (newUrl) => {
        InitPlayer();
    },
    {
        deep: true,
    }
);


const InitPlayer = () => {
    let player = new Player({
        el: videoPlayer.value,
        url: props.Src,
        poster: props.Poster,
        height: "70vh",
        width: "55vw",
        volume: 0.5,
        marginControls: false,
        closeVideoClick: true,
        closeVideoDblclick: true,
    })
}

const CloseVideo = () => {
    emits('closeVideo')
}

</script>

<style lang='less' scoped>
.video_root {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -60%);
    width: 55vw;
    height: 70vh;

    .video_base{
        position: relative;
        width: 100%;
        height: 100%;

        .video_close {
            position: fixed;
            top: -1.5rem;
            right: -0.5rem;
            z-index: 9999;
            color: #ccc;
            font-size: 2rem;
        }
    }
    
}
</style>